<template>
    <div class="person">
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }}--{{ item.age }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name = 'Person'>
    import type { Persons } from '@/types';
    import { defineProps,withDefaults } from 'vue';

    // defineProps(['a','b'])
    // let x = defineProps(['a','list'])
    // console.log(x.a);
    //只接受list
    //defineProps(['list'])

    //接收list+限制类型
    // defineProps<{list:Persons}>()

    //接收list+限制类型+限制必要性+指定默认值
    withDefaults(defineProps<{list?:Persons}>(),{
        list:()=>[{id:'asudfysafd01',name:'康师傅。王麻子。特仑苏',age:18}]
    })
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 10px;
}

li{
    font-size: 20px;
}
</style>